import Style from './index.module.scss'
import { Dropdown, Space } from 'antd'
import { UserOutlined } from '@ant-design/icons'
interface MenuTypes {
  key: string
  label: string
}

const Header = () => {
  const items: MenuTypes[] = [
    {
      key: '/Layout/Home',
      label: '用户中心',
    },
    {
      key: '/',
      label: '退出',
    },
  ]
  const navigator = useNavigate() // 路由跳转
  /*
    路由跳转：
  */
  const onClick = ({ key }: { key: string }) => {
    navigator(key) //路由跳转
  }
  return (
    <>
      <div className={Style.headerBox}>
        <div className={Style.left}>左侧</div>
        <div className={Style.title}>指挥控制系统</div>
        <div className={Style.right}>
          <Dropdown
            trigger={['click']}
            menu={{
              items,
              onClick,
            }}
            placement="bottom"
            arrow
          >
            <Space>
              <div className={Style.userBox}>
                <UserOutlined />
              </div>
            </Space>
          </Dropdown>
        </div>
      </div>
    </>
  )
}
export default Header
